<template>
  <transition name="fade">
    <div class="confirm_box" v-if="show">
      <div class="confirm_title">
        <div class="confirm_hint">温馨提示</div>
        <div class="confirm_close" @click="cancel" v-if="closeShow">
          X
        </div>
      </div>
      <div class="confirm_content">
        {{ content }}
        <input type="text" v-model="mag">
      </div>
      <div class="confirm_select">
        <div class="confirm_select_cancel" @click="cancel">取消</div>
        <div class="confirm_select_affirm" @click="affirma">{{ affirm }}</div>
      </div>
    </div>
  </transition>
</template>

<script>
export default { 
  data() {
    return {
      show:false,
      mag:'一个人'
    };
  },
  methods: {
    cancel() {
      this.show = false;
      this.$emit('on-cancel')
    },
    affirma(){
        // 传到confirm.js里面
         this.$emit('on-affirma',this.mag)
    }
  }
};
</script>

<style lang="less" scoped>
.confirm_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 150px;
  z-index: 200;
  background-color: #fff;
  border: 1px solid #000;

  .confirm_title {
    height: 50px;
    display: flex;
    border-bottom: 1px solid #000;
    .confirm_hint {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .confirm_close {
      position: absolute;
      width: 50px;
      height: 50px;
      right: 0;
      line-height: 50px;
      text-align: center;
      cursor:pointer;
      border-left: 1px solid #000;
    }
  }
  .confirm_content {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .confirm_select {
    display: flex;
    justify-content: space-around;
    div {
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor:pointer
    }
    .confirm_select_cancel {
      background-color: rgb(241, 125, 125);
    }
    .confirm_select_affirm {
      background-color: rgb(139, 116, 241);
    }
  }
}
.fade-enter-active {
  transition: all 0.5s ease;
}
.fade-leave-active {
  transition: all 0.3s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
